<!--题目管理-->
<template>
  <div>
    <a-card class="contentFullHeight" :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">

          <a-form-item label="题目类型">
            <a-select
              allowClear
              v-model="searchParams.questionType"
              :getPopupContainer="triggerNode => triggerNode.parentNode"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">单选题</a-select-option>
              <a-select-option value="1">多选题</a-select-option>
              <a-select-option value="2">判断题</a-select-option>
              <a-select-option value="3">简答题</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="题库名称">
            <ItemBankSelect :allowClear="true" v-model="searchParams.examId" />
          </a-form-item>

          <a-form-item label="题目关键字">
            <a-input style="width: 350px" allowClear v-model="searchParams.questionTitle"></a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" icon="search" @click="search">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="plus" @click="add">新增</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="download" @click="handleExport" :loading="downloadLoading">导出</a-button>
          </a-form-item>
          <!--导入-->
          <a-form-item>
            <UploadCom :type="4" @handleSearch="search"></UploadCom>
          </a-form-item>

        </a-form>
      </a-card>
      <a-table
        bordered
        rowKey="id"
        size="small"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="questionTitle" slot-scope="text">
          <div v-if="text">
            <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </div>
        </template>

        <template slot="questionType" slot-scope="text">
          {{ $mappingConfig.exam.question.typeSel[text] }}
        </template>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="edit(record)" href="javascript: void(0);">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm
              placement="left"
              title="确认删除?"
              @confirm="del(record)"
              okText="确认"
              cancelText="取消"
            >
              <a href="javascript: void(0);">删除</a>
            </a-popconfirm>
          </template>
        </span>

      </a-table>

      <QuestionPopup ref="questionPopup" @ok="getTableData"></QuestionPopup>

    </a-card>
  </div>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import QuestionPopup from './form'
import ItemBankSelect from '@/hzjComponents/select/ItemBankSelect'
import questionService from '@/service/exam/questionManage'
import UploadCom from '@/components/uploadCom';
import {exportQuestionList} from '@/api/examManage/questionBankManage';
import {downloadFile} from '@/utils/util';
const columns = [
  {
    title: '序号',
    dataIndex: 'key'
  },
  {
    title: '题目ID',
    dataIndex: 'id'
  },
  {
    title: '类型',
    dataIndex: 'questionType',
    scopedSlots: { customRender: 'questionType' }
  },
  {
    title: '所属题库',
    dataIndex: 'examName'
  },
  {
    title: '题目内容',
    dataIndex: 'questionTitle',
    scopedSlots: { customRender: 'questionTitle' }
  },
//  {
//    title: '创建时间',
//    dataIndex: 'createTime'
//  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
    Ellipsis,
    QuestionPopup,
    ItemBankSelect,
    UploadCom
  },
  data () {
    return {
      searchParams: {
        examId: '',
        questionType: '',
        questionTitle: ''
      },
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20'],
        showTotal: total => { return `共 ${total} 条` },
        current: 1,
        pageSize: 10,
        total: 0
      },
      columns,
      loading: false,
      tableData: [],

      downloadLoading: false
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    handleTableChange (pagination, filters, { field, order }) {
      this.pagination = pagination
      if (field && order) {
        this.searchParams.sortField = field
        this.searchParams.sortOrder = order === 'ascend' ? 'asc' : 'desc'
      }
      this.getTableData()
    },
    getTableData () {
      this.loading = true
      const { pageSize, current } = this.pagination
      const { sortField, sortOrder, questionType, examId, questionTitle } = this.searchParams
      const parameter = {
        _search: true,
        sortField,
        sortOrder,
        data: {
          examId,
          questionType,
          questionTitle
        },
        pageSize: pageSize || 10,
        pageNumber: current || 1
      }
      questionService.page(parameter).then(({ total, records }) => {
        this.loading = false
        this.pagination.total = total
        this.tableData = records
      }).catch(() => {
        this.loading = false
      })
    },
    search () {
      this.pagination.current = 1
      this.getTableData()
    },
    add () {
      this.$refs.questionPopup.showAdd()
    },
    async edit ({ id, examIds }) {
      if (!id) {
        this.$message.info('id不能为空')
        return
      }
      if (!examIds) {
        this.$message.info('题库id不能为空')
        return
      }
      const { code, data } = await questionService.getInfo({ data: { id } })
      if (code !== 200) {
        this.$message.info('获取题目详细信息失败')
        return
      }
      this.$refs.questionPopup.showEdit({ ...data, examIds })
    },
    del ({ id }) {
      if (!id) {
        this.$message.info('id不能为空')
        return
      }
      questionService.del({ id }).then(({ code, msg }) => {
        if (code === 200) {
          this.$message.success('删除成功')
          this.getTableData()
        } else {
          this.$message.error(msg || '删除失败')
        }
      })
    },
    handleExport () {
      this.downloadLoading = true
      const parameter = {
        _search: false,
        sortField:this.searchParams.sortField,
        sortOrder:this.searchParams.sortOrder,
        data: {
          examId:this.searchParams.examId,
          questionType:this.searchParams.questionType,
          questionTitle:this.searchParams.questionTitle,
        },
        pageSize: '',
        pageNumber: ''
      }
      exportQuestionList(parameter).then(res => {
          if(this.searchParams.questionType == '') {
            var a = '全部题目'
          }else if(this.searchParams.questionType == 0) {
            var a = '单选题'
          }else if(this.searchParams.questionType == 1) {
            var a = '多选题'
          }else if(this.searchParams.questionType == 2) {
            var a = '判断题'
          }else {
            var a = '简答题'
          }
        downloadFile(res,a,"xlsx")
        this.downloadLoading = false
      })
    },
  }
}
</script>
